<template>
	<div class="top">
		<h6>秒杀活动 / 添加秒杀活动</h6>
		<button>返回</button>
		<div class="miao">
			<h4>请填写秒杀活动相关信息</h4>
			<br>
			<div class="bao">
			活动编号:
				<input placeholder="请输入名称" clearable class="huo"/>
			</div>
			<div class="bao">
				活动封面：
				<div class="shang">
					<div class="quan"></div>
					上传照片
				</div>
				<p>只能上传jpg/png文件,并不超过500kb</p>
			</div>
			<br>
			<div class="bao">
			活动状态:
				<el-switch
				    v-model="value2"
				    class="mb-2"
				    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
				    active-text="上线状态"
				    inactive-text="下线状态"
				  />
			</div>
			<div class="bao">
			活动日期:
				<!-- <div class="demo-time-range">
				    <el-time-select
				      v-model="startTime"
				      :max-time="endTime"
				      class="mr-4"
				      placeholder="Start time"
				      start="08:30"
				      step="00:15"
				      end="18:30"
				    />
				    <el-time-select
				      v-model="endTime"
				      :min-time="startTime"
				      placeholder="End time"
				      start="08:30"
				      step="00:15"
				      end="18:30"
				    />
				  </div> -->
				  <el-date-picker v-model="timeRange"  type="datetimerange"
				      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
				      @change="getList" :disabledDate="disablesDate"
				  />
				  <el-row class="mb-4" style="margin-left: 70px;">
				      <el-button type="primary" style="background-color: #38a28a;">立即添加</el-button>
					  <el-button plain>取消</el-button>
				    </el-row>
			</div>
		</div>
	
</div>
</template>

<script >
	import {ref} from 'vue'
	
	export default {
		name: 'cao',
		setup() {
			const value2 = ref(true)
			return {
				value2
			}
			// const startTime = ref('')
			// return {
			// 	startTime
			// }
			// const endTime = ref('')
			// return {
			// 	endTime
			// }
		},
		disablesDate(time){
		  const _minTime = Date.now() + 24 * 60 * 60 * 1000 * 7 //最小时间可选前七天
		  const _maxTime = Date.now() - 24 * 60 * 60 * 1000 * 1 //最大时间可选今天
		  return time.getTime() <= _maxTime || time.getTime() > _minTime
		}
	}
</script>
<style>
	.bao>p{
		margin-left:80px ;
		font-size: 14px;
	}
	.quan{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: #38a28a;
		margin: auto;
	}
	.shang{
		text-align: center;
		width: 80px;
		height: 80px;
		background-color: #fafafa;
		display: inline-block;
		font-size: 14px;
	}
	.bao{
		width: 100%;
		height: 50px;
		margin-top:30px;
		margin-bottom:30px;
		line-height: 50px;
	}
	.huo{
		width:300px;
		height: 30px;
		border: 1px solid #f1f3f5;
		outline:none;
		padding-left:5px ;
		
	}
	.top{
		width: 100%;
		height: 100%;
		padding: 30px 30px;
		background-color: #f0f0f0;
	}
	h6,h4{
		float: left;
		
	}
	.top>button{
		background-color: #38a28a;
		color: white;
		width: 70px;
		height: 30px;
		float: right;
		border: none;
		border-radius: 5px;
		margin-top: -10px;
	}
	.miao{
		width: 100%;
		height: 100vh;
		margin-top: 40px;
		background-color: white;
		padding-top:30px ;
		padding-left:30px ;
	}
</style>
